<template>
  <el-dialog title="管理术语" :visible.sync="dialogVisible" :before-close="handleClose" fullscreen>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="引导语" name="guide"
        ><TabPaneGuide ref="guideTabRef" :visible="dialogVisible && activeTab === 'guide'"
      /></el-tab-pane>
      <el-tab-pane label="术语" name="term"
        ><TabPaneTerms ref="termsTabRef" :visible="dialogVisible && activeTab === 'term'"
      /></el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import tinymce from 'tinymce'
import { uniqWith } from 'lodash'
import { Message } from 'element-ui'
import TabPaneGuide from './TabPaneGuide.vue'
import TabPaneTerms from './TabPaneTerms.vue'

export default {
  name: 'InsertTermsDialog',
  components: { TabPaneGuide, TabPaneTerms },
  data() {
    return {
      activeTab: 'guide',
      dialogVisible: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.activeTab = 'guide'

        const p = tinymce.activeEditor.getDoc()?.querySelector(`[data-type="terms_definitions"]+p`)
        if (p) {
          let guideIndex = 0
          const str = p.innerText
          if (str.includes('界定的以及下列术语和定义适用于本文件。为了便于使用')) {
            guideIndex = 2
          } else if (str.includes('界定的下列术语和定义适用于本文件，为了便于使用')) {
            guideIndex = 4
          } else if (str.includes('界定的以及下列术语和定义适用于本文件')) {
            guideIndex = 1
          } else if (str.includes('界定的术语和定义适用于本文件')) {
            guideIndex = 3
          }

          const spans = [...p.querySelectorAll('span')]
          const uniqSpans = uniqWith(spans, (a, b) => a.dataset.id === b.dataset.id)
          const selections = uniqSpans.map((node) => {
            const attrMap = node.dataset
            return {
              contentType: 'refdoc',
              contentNumber: null,
              linkUrl: attrMap?.linkUrl,
              bizExtra: JSON.stringify({
                refname: attrMap?.refname,
                standardId: attrMap?.standardid,
                mainContentId: attrMap?.maincontentid,
                refclassification: attrMap?.refclassification,
                refdate: attrMap?.refdate,
                refcode: attrMap?.refcode || attrMap?.refcontent,
                refanchor: attrMap?.refanchor,
                docno: attrMap?.docno || '',
                refversion: attrMap?.refversion
              }),
              content: attrMap?.refcontent,
              fullContent: node.innerText,
              dataId: attrMap?.id
            }
          })

          this.$nextTick(() => this.$refs.guideTabRef.setData({ guideIndex, selections }))
        }
      }
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    async handleConfirm() {
      const guideObj = this.$refs.guideTabRef.getData()
      const termList = this.$refs.termsTabRef.getData()
      console.debug(guideObj, termList)
      if (guideObj.guideIndex > 0 && guideObj.selections.length === 0) {
        Message.warning('请选择标准编号')
        return
      }
      this.$store.commit('xmleditor/SET_TERM_GUIDE', guideObj)
      this.$store.commit('xmleditor/SET_TERM_BLOCK_LIST', termList)
      this.$store.commit('xmleditor/UPDATE_TERMS2')
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog {
  min-width: 800px;
}
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
::v-deep .el-dialog__footer {
  padding: 0 20px 10px;
}
</style>
